<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>出勤</title>

</head>
<body>
    <div id="app">
        <el-row>
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
                <el-form-item label="名称" >
                    <el-input
                            v-model="queryParams.name"
                            placeholder="名称"
                            clearable
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="部门" >
                    <el-input
                            v-model="queryParams.dpm"
                            clearable
                            @keyup.enter.native="handleQuery">

                    </el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                            v-model="queryParams.date"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-button type="primary" @click="toAdd">新增</el-button>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="dpm"
                        label="部门"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="startWork"
                        label="上班时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="endWork"
                        label="下班时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toEdit(scope.row)">修改</el-button>
                        <el-button type="text" @click="toDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :current-page.sync="page.current"
                    :page-size.sync="page.size"
                    @current-change="getList"
                    >
            </el-pagination>
        </el-row>

        <el-dialog title="详情" :visible.sync="open">
            <el-form :model="form">

                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在部门" :label-width="formLabelWidth">
                    <el-input v-model="form.dpm" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="form.date"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="上班时间" :label-width="formLabelWidth">
                    <el-time-select
                            placeholder="起始时间"
                            v-model="form.startWork"
                            :picker-options="{
                              start: '08:00',
                              step: '00:15',
                              end: '18:30'
                            }">
                    </el-time-select>
                </el-form-item>
                <el-form-item label="下班时间" :label-width="formLabelWidth">
                    <el-time-select
                            placeholder="结束时间"
                            v-model="form.endWork"
                            :picker-options="{
                              start: '08:00',
                              step: '00:15',
                              end: '24:00',
                            }">
                    </el-time-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>

    </div>

    <!-- vue -->
    <script src="/assets/js-vue/vue.js"></script>
    <!--element-->
    <link rel="stylesheet" type="text/css" href="/assets/js-vue/element/index.css">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <script src="/assets/js-vue/element/index.js"></script>

    <script type="text/javascript" src="/assets/jquery-3.6.1.min.js"></script>

<script type="text/javascript ">
    var app = new Vue({
        el:"#app",
        data(){
            return{
                tableData:[],
                open:false,
                queryParams:{

                },
                page:{
                  total:0,
                  size:10,
                  current:1,
                },
                form:{},
                formLabelWidth:'120px',
            }
        },
        created(){
            this.getList();
        },
        methods:{
            getList(){
                $.ajax( {
                    url:'/'+"work/list",
                    xhrFields:{
                      withCredentials:true,
                    },
                    method:"POST",
                    data:this.queryParams,
                    success:(res)=>{
                        if(res.list && res.list.length > 0 ){
                            const start = (this.page.current -1) * this.page.size;
                            const end = (this.page.current -1) * this.page.size + this.page.size;
                            console.log(start)
                            console.log(end)
                            this.tableData = res.list.slice(start,end);
                            console.log('=====')
                            console.log(this.tableData)
                            this.page.total = res.list.length;
                        }else {
                            this.tableData = [];
                            this.page.total = 0;
                        }
                    }
                })
            },
            toAdd(){
                this.open = true;
                this.form = {};
            },
            handleSubmit(){
                console.log(this.form)
                if(this.form.id >= 0){
                    //修改
                    $.ajax( {
                        url:'/'+"work/edit",
                        xhrFields:{
                            withCredentials:true,
                        },
                        method:"POST",
                        data:this.form,
                        success:(res)=>{
                            if(res.result == 'yes'){
                                this.$message.success("修改成功");
                                this.getList();
                                this.open = false;
                            }else{
                                this.$message.error("操作有误");
                            }
                        }
                    })
                }else{
                    //新增
                    $.ajax( {
                        url:'/'+"work/add",
                        method:"POST",
                        xhrFields:{
                            withCredentials:true,
                        },
                        data:this.form,
                        success:(res)=>{
                            if(res.result == 'yes'){
                                this.$message.success("新增成功");
                                this.getList();
                                this.open = false;
                            }else{
                                this.$message.error("操作有误");
                            }
                        }
                    })
                }
            },
            toEdit(row){
                $.ajax( {
                    url:'/'+"work/getInfo",
                    method:"POST",
                    xhrFields:{
                        withCredentials:true,
                    },
                    data:row,
                    success:(res)=>{
                        this.form = res.data;
                        this.open = true;
                    }
                })
            },
            toDel(row){
                $.ajax( {
                    url:'/'+"work/del",
                    method:"POST",
                    xhrFields:{
                        withCredentials:true,
                    },
                    data:row,
                    success:(res)=>{
                        if(res.result == 'yes'){
                            this.$message.success("删除成功");
                            this.getList();
                        }

                    }
                })

            },
        }


    })
</script>

</body>
</html>